/* 
========================================================================
HORIZONTAL DROPDOWN MENU SYSTEM
========================================================================
*/
#menubar								{ margin: 4px 0 0 0; }
#menubar .top-bar                       { background-color: #222; margin: 0 0 6px 0; width: auto; }
#menubar .top-bar.expanded .title-area  { background: #444; }
#menubar .top-bar-section li a:not(.button)
                                        { height: 25px; line-height: 20px; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; background-color: #222; color: #eee; font-weight: normal; font-size: 70%; text-transform: uppercase; padding: 2px 9px; }
/* Down arrow on each menu in main category nav bar - control position and colour */
#menubar .top-bar-section .has-dropdown > a:after
                                        { border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent; top: 13.5px; padding: 0; }
#menubar .top-bar-section li            { border-right: dotted 1px #ccc; }
#menubar .top-bar-section li a:hover
                                        { text-decoration: underline; }
/* Links within the dropdown menus */
#menubar .top-bar-section .dropdown li  { border-right: solid 1px #fff; }
#menubar .top-bar-section .dropdown ul  { border-bottom: solid 1px #fff; }
#menubar .top-bar-section .dropdown li a
                                        { background-color: #444; color: #eee; width: auto; height: auto; font-weight: normal; padding: 2px 15px 4px 15px; font-size: 90%; text-transform: none; }
#menubar .top-bar-section .dropdown li a:hover
                                        { color: #eee; background-color: #444; text-decoration: none; }
#menubar .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after
                                        { top: 1px; }
#menubar .top-bar li.name span          { display: inline-block; padding: 0 0 0 10px; }
/* 
========================================================================
CATEGORY NAVIGATION MENU
The primary styles are created by foundation.css. Rather than change
styles there (which would be overwritten if we upgrade Foundation to
a newer version), just just grab the bits we need to change here.
========================================================================
*/
#categorymenu .top-bar                  { border-bottom: solid 1px #000; background-color: #a35; min-height: 51px; }
#categorymenu .top-bar-section li       { background-color: #555; border-right: dotted 1px #fff; }
#categorymenu .top-bar-section li a:not(.button)
                                        { color: #fff; background-color: #a35; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; padding: 3px 15px; height: 50px; line-height: 1.2em; font-weight: bold; min-width: 125px; font-size: 80%; }
#categorymenu .top-bar-section li a:hover
                                        { background-color: #555; color: #fff; }
#categorymenu .top-bar-section li ul    { border-bottom: solid 1px #000; }
#categorymenu .top-bar-section li li    { border-right: solid 1px #000; }
#categorymenu .top-bar-section li li a:not(.button)
                                        { color: #ccc; background-color: #555; font-family: Segoe UI, Arial, Helvetica, Sans-Serif; padding: 3px 15px 10px 15px; line-height: 1.2em; font-weight: normal; font-size: 80%; }
#categorymenu .top-bar-section li a:hover
                                        { background-color: #555; color: #fff; }

#categorymenu .top-bar-section .has-dropdown > a:after
                                        { border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent; top: 13.5px; }
#categorymenu .top-bar-section .dropdown li a
                                        { display: block; color: #fff; height: auto; font-weight: normal; padding: 2px 15px 4px 15px; font-size: 90%; text-transform: none; }
#categorymenu .top-bar-section .dropdown li a:hover
                                        { }
#categorymenu .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after
                                        { top: 1px; }
#categorymenu .title-area li.name span  { display: none; }

/* Mobile version */
#categorymenu .top-bar.expanded li      { background-color: #a35; border-right: none; }
#categorymenu .top-bar.expanded li ul   { border: none; }
#categorymenu .top-bar.expanded li li a { }

/* Button to replace main nav menu in small devices */
#categorymenu .mobile-link              { min-height: 51px; font-weight: bold; padding: 2px 15px; display: block; }
#categorymenu .mobile-link:hover        { color: #fff; }

/* 
========================================================================
BIG SCREENS
========================================================================
*/
@media only screen and (min-width: 930px) {
  .row { max-width: 100%; }
  #container #centre_container { padding: 0 20px; }
  }

/* 
========================================================================
MEDIUM SCREENS
========================================================================
*/
@media only screen and (max-width: 930px) {
  .products_tabular .item,
  .products_shortened .item,
  .subcategories_shortened .item,
  #homepage .products_tabular .item { display: block; float: none; width: 50%; margin: 0 0 5px 0; }
  .Kartris-DetailsView-Value { width: 270px; }
  ul { max-width: 100%; }
  #pagecontent_pad { min-height: 200px; padding-bottom: 15px; }
  .versions td.info { max-width: 200px; overflow: hidden; }
  .basket td.quantity input { width: 32px; text-align: right; }
  #container { padding: 0; }
  select,
  input { width: 100%; }
  #footer_inside { margin: 0; }
  }

/* 
========================================================================
SMALL SCREENS
========================================================================
*/
@media only screen and (max-width: 530px) {
  .products_tabular .item,
  .products_shortened .item,
  .subcategories_shortened .item,
  #homepage .products_tabular .item { display: block; float: none; width: 100%; margin: 0 0 5px 0; }
  .Kartris-DetailsView-Value { width: 270px; }
  ul { max-width: 100%; }
  #pagecontent_pad { min-height: 200px; padding-bottom: 15px; }
  .versions td.info { max-width: 200px; overflow: hidden; }
  .basket td.quantity input { width: 32px; text-align: right; }
  #container { padding: 0; }
  select,
  input { width: 100%; }
  #footer_inside { margin: 0; }
  }

/* 
========================================================================
ORBIT SLIDESHOW
========================================================================
*/
#front-slideshow                        { background-color: #333; z-index: 1; }
#front-slideshow li                     { padding: 10px 80px; min-height: 200px; }

/* 
========================================================================
GENERAL 
========================================================================
*/
table tr td                             { font-size: 100%; }
table thead,
table tfoot                             { background: #fff; }
